<template>
  <div id="details">
    <div class="top">
      <div class="bgc">
        <img :src="detArr.blurPicUrl" >
      </div>
      <div class="pic">
        <img :src="detArr.blurPicUrl" >
        <p>专辑</p>
      </div>
      <div class="title">
        <p>{{ detArr.name }}</p>
        <p>
          歌手:<span>{{ detArr.artist.name }}</span>
        </p>
        <span>发行时间: {{ year }}-{{ month }}-{{ date }}</span>
      </div>
    </div>
    <!-- 简介 -->
    <div class="introduction">
      <span :class="{ content }">简介:{{ detArr.description }} </span>
      <!-- 下拉 -->
      <p class="iconfont"  :class="{ 'icon-icon': content, 'icon-up': !content }" @click="iconSelect"></p>
    </div>
    <!-- 歌曲列表 -->
    <div class="list">
      <p>歌曲列表</p>
      <!-- 歌曲组件 -->
      <detlist :detListArr="detListArr"></detlist>
      <p>精彩评论</p>
      <!-- 评论组件 -->
      <comment :commentArr="commentArr"></comment>
      <div class="bottom">
        查看全部{{ detArr.info.commentCount }}条评论<span class="iconfont icon-arrow-left" ></span>
      </div>
    </div>
    <!-- 底部 -->
    <footer>
      <a href=""><span class="iconfont icon-xigua"></span> 收藏专辑</a>
    </footer>
  </div>
</template>

<script>
import detlist from "../components/DetList.vue";
import comment from "../components/comment.vue";
export default {
  data: () => {
    return {
      detArr: JSON.parse(localStorage.getItem("detArr")) || [], //头部
      detListArr: JSON.parse(localStorage.getItem("detListArr")) || [], //歌曲列表
      commentArr: JSON.parse(localStorage.getItem("commentArr")) || [], //评论
      // detArr:[],
      // detListArr:[],
      // commentArr:[],
      time: "",
      year: "",
      month: "",
      date: "",
      content: true,
    };
  },
  methods: {
    iconSelect() {
      this.content = !this.content;
    },
  },
  watch: {
    detArr() {
      localStorage.setItem("detArr", JSON.stringify(this.detArr));
    },
    detListArr() {
      localStorage.setItem("detListArr", JSON.stringify(this.detListArr));
    },
    commentArr() {
      localStorage.setItem("commentArr", JSON.stringify(this.commentArr));
    },
  },
  async mounted() {
    let res = await this._axios.get(`/album?id=${this.$route.params.id}`);
    this.detArr = res.data.album;
    this.time = new Date(this.detArr.publishTime);

    this.year = this.time.getFullYear(); //年
    this.month = this.time.getMonth() + 1; //月
    this.date = this.time.getDate(); //日
    this.detListArr = res.data.songs;

    //请求评论
    let res1 = await this._axios.get(`/comment/album?id=${this.$route.params.id}`);
    this.commentArr = res1.data.hotComments;
    //   this.times=new Date(this.commentArr[0].time)
    // console.log(this.times);
    // console.log(this.detArr);
    // console.log(this.detListArr);
    // console.log(this.commentArr);
  },
  components: {
    detlist,
    comment,
  },
};
</script>

<style lang="scss" scoped>
#details {
  .top {
    display: flex;
    align-items: center;
    width: _vw(750);
    height: _vw(370);
    background: url("//s3.music.126.net/mobile-new/img/album@2x.png?4d5d63fbc459c8e2f7dddead07514fba=")
      no-repeat;
    background-position: _vw(20) _vw(63);
    background-size: 38%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    .bgc {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2;
      overflow: hidden;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        transform: translateY(-27%);
        filter: blur(5px);
      }
    }
    .pic {
      width: _vw(250);
      height: _vw(250);
      position: relative;
      overflow: hidden;
      img {
        width: _vw(250);
        height: _vw(250);
        margin-left: _vw(25);
        position: absolute;
      }
      p {
        width: _vw(80);
        height: _vw(35);
        background-color: #b62c2c;
        color: #fff;
        font-size: _vw(21);
        line-height: _vw(35);
        text-align: center;
        position: absolute;
        left: _vw(25);
        top: _vw(25);
        border-radius: 0 25px 25px 0;
      }
    }
    .title {
      position: absolute;
      right: _vw(180);
      p {
        font-size: _vw(34);
        color: #fff;
        &:first-of-type {
          margin-bottom: _vw(50);
        }
        &:last-of-type {
          margin-bottom: _vw(20);
          font-size: _vw(30);
          color: #a2b0b7;
          span {
            font-size: _vw(30);
            color: #fff;
          }
        }
      }
      span:last-of-type {
        font-size: _vw(23);
        color: #a2b0b7;
      }
    }
  }
  .introduction {
    padding: _vw(10);
    background-color: #f8f8f8;
    .content {
      font-size: _vw(28);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
    p {
      text-align: right;
    }
  }
  .list {
    // height: _vw(50);
    p {
      padding: 0 _vw(20);
      height: _vw(45);
      background-color: #eeeff0;
      font-size: _vw(23);
      line-height: _vw(45);
      position: relative;
      z-index: 22;
    }
    .bottom {
      height: _vw(85);
      background-color: #f8f8f8;
      line-height: _vw(85);
      text-align: center;
    }
  }
  footer {
    height: _vw(110);
    line-height: _vw(110);
    position: sticky;
    text-align: center;
    background-color: #fff;
    bottom: 0;
    a {
      margin: 0 auto;
      display: inline-block;
      width: _vw(605);
      height: _vw(75);
      background-color: #f00;
      border-radius: 25px;
      color: #fff;
      line-height: _vw(75);
    }
  }
}
</style>